<template>
	<div id="out3">
		   <div id="top3">
			<a href="#/CommodityDetails"><img id="imgTop1" src="../assets/img/duanhuowang/zuojiantou.png" alt=""/></a>
			<span>品牌名字</span>
			<img id="imgTop2" src="../assets/img/duanhuowang/huizhuan.png" alt=""/>
		</div>  
		<div class="round2"><img src="../assets/img/shouye/1tuijian/xuanliyanzhuang.png" alt=""/></div>
	    <div class="pinpaiTop">
	    	    <span>
	    	    	    品牌标志
	    	    </span>
	    	    <p class="tit">品牌名字品牌名字</p>
	    	    <p class="from">来自英国</p>
	    	    <p class="jieshao">品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍</p>
	    	    <p class="bottom"><img src="../assets/img/gouwuche/xiangshangjiantou.png" alt=""/></p>
	    </div>
	    <div class="con1">
	    	    <p class="tit">全部商品</p>
	    	    <div>
	    	        <img src="../assets/img/duanhuowang/chuncai.png" alt=""/>
	    	        <div>
	    	        	    <p class="name1">焕彩璀璨唇彩4.8g</p>
	    	        	    <p class="jS">焕彩璀璨唇彩4.8g焕彩璀璨唇彩4.8g焕彩璀璨唇彩4.8g焕彩璀璨唇彩4.8g</p>
	    	            <p class="bottom1">
	    	            	   <span class="left1"><img src="../assets/img/shouye/6sousuojieguo/6red.png" alt=""/></span>
	    	            	   <span class="middle"><img src="../assets/img/duanhuowang/huiji.png" alt=""/>  海外直邮</span>
	    	            	   <span class="right1">￥166.6</span>
	    	            </p>
	    	        </div>
	    	    </div>
	    </div>
	    <div class="con1">
	    	    <div>
	    	        <img src="../assets/img/duanhuowang/chuncai.png" alt=""/>
	    	        <div>
	    	        	    <p class="name1">焕彩璀璨唇彩4.8g</p>
	    	        	    <p class="jS">焕彩璀璨唇彩4.8g焕彩璀璨唇彩4.8g焕彩璀璨唇彩4.8g焕彩璀璨唇彩4.8g</p>
	    	            <p class="bottom1">
	    	            	   <span class="left1"><img src="../assets/img/shouye/6sousuojieguo/6red.png" alt=""/></span>
	    	            	   <span class="middle"><img src="../assets/img/duanhuowang/huiji.png" alt=""/>  海外直邮</span>
	    	            	   <span class="right1">￥166.6</span>
	    	            </p>
	    	        </div>
	    	    </div>
	    </div>
	    <div class="con1">
	    	    <div>
	    	        <img src="../assets/img/duanhuowang/chuncai.png" alt=""/>
	    	        <div>
	    	        	    <p class="name1">焕彩璀璨唇彩4.8g</p>
	    	        	    <p class="jS">焕彩璀璨唇彩4.8g焕彩璀璨唇彩4.8g焕彩璀璨唇彩4.8g焕彩璀璨唇彩4.8g</p>
	    	            <p class="bottom1">
	    	            	   <span class="left1"><img src="../assets/img/shouye/6sousuojieguo/6red.png" alt=""/></span>
	    	            	   <span class="middle"><img src="../assets/img/duanhuowang/huiji.png" alt=""/>  海外直邮</span>
	    	            	   <span class="right1">￥166.6</span>
	    	            </p>
	    	        </div>
	    	    </div>
	    </div>
	    <span class="jiaZai">加载更多</span>
	</div>
</template>

<script>
export default {
		name: 'PinPaiM',
		methods: {
			round2: function() {
				setInterval(function() {
					$(".round2>img").fadeToggle();
				}, 2000);
				$(".con1").eq(1).css("top","92rem");
				$(".con1").eq(2).css("top","113rem");
				var l=$(".con1").length;
				$(".con1").eq(l-1).css("margin-bottom","14.70rem");
				/************/
				$(".jiaZai").click(function(){
					$(".con1").eq(l-1).attr("v-for","con in 3");
				});
				
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out3{
		background: #f2f2f2;
		height: 100vh;
		overflow: scroll;
	}
	#out3>.jiaZai{
		position: fixed;
		text-align: center;
		bottom: 0rem;
		width: 100vw;
		height: 14.7rem;
		line-height: 14.7rem;
		font-family: MicrosoftYaHei;
		font-size: 2.4rem;
		background: #CCCCCC;
	}
	#top3 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		position: fixed;
		z-index: 10;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}
	#imgTop1 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#top3>span {
		width: 37.6rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		letter-spacing: 0px;
	}
	
	#imgTop2 {
		width: 3.6rem;
		height: 3.5rem;
	}
	.round2 {
		width: 100vw;
		height: 30rem;
		background: url(../assets/img/shouye/1tuijian/datu.png) no-repeat;
		background-size: 100% 100%;
		font-size: 0;
		box-sizing: border-box;
		position: absolute;
		top: 9.6rem;
	}
	
	.round2>img {
		width: 100vw;
		height: 30.5rem;
	}
	.pinpaiTop{
		background: white;
		position: absolute;
		top: 39.6rem;
		font-size: 1.8rem;
		padding: 2rem;
	}
	.pinpaiTop>span{
		position: absolute;
		width: 10rem;
		height: 10rem;
		border: solid 0.1rem #cccccc;
		background: white;
		box-sizing: border-box;
		font-size: 2.4rem;
		padding: 2.5rem;
		top: -2.3rem;
	}
	.pinpaiTop>.tit{
		position: absolute;
		font-size: 2.8rem;
		left: 14rem;
	}
	.pinpaiTop>.from{
		position: absolute;
		left: 14rem;
		top: 5.5rem;
	}
	.pinpaiTop>.jieshao{
		padding-top: 9rem;
	}
	.pinpaiTop>.bottom{
		text-align: center;
	}
	.pinpaiTop>.bottom>img{
		margin-top: 2rem;
		width: 2rem;
		height: 1.3rem;
	}
	.con1{
		padding: 0 2rem;
		position: absolute;
		top: 62rem;
		background: white;
		width: 100vw;
		box-sizing: border-box;
	}
	.con1>.tit{
		font-size: 3rem;
		line-height: 9rem;
		border-bottom: 0.1rem solid #cccccc;
	}
	.con1>div{
		padding: 2rem 3rem;
	}
	.con1>div>img{
		width: 7rem;
		height: 15.3rem;
	}
	.con1>div>div{
		width: 50rem;
		float: right;
	}
	.con1>div>div>.name1{
		font-size: 3rem;
		padding-bottom: 2rem;
	}
	.con1>div>div>.jS{
		font-size: 2.4rem;
		color: #4d4d4d;
		line-height: 3.3rem;
	}
	
	.con1>div>div>.bottom1{
		margin-top: 2rem;
	}
	.con1>div>div>.bottom1>.left1{
		float: left;
		width: 3rem;
		height: 2rem;
		background-color: #f2f2f2;
		border: solid 0.1rem #cccccc;
		text-align: center;
		padding-top: 0.5rem;
		box-sizing: border-box;
		margin-right: 2rem;
	}
	.con1>div>div>.bottom1>.middle{
		float: left;
		font-size: 3rem;
		line-height: 3rem;
		transform: translateY(-1rem);
	}
	.con1>div>div>.bottom1>.middle>img{
		width: 3.4rem;
		height: 3.3rem;
	}
	.con1>div>div>.bottom1>.right1{
		float: right;
		font-family: SimHei;
		font-size: 3rem;
		line-height: 3rem;
		color: #e53e42;
	}
</style>